<template>
  <div class="chat">
    <scroll class="scroll-wrapper" :data="goodsList" :pullup="true" @scrollToEnd="loadMore" :probeType="3" ref="scroll" :listenScroll="true" @scroll="scroll">
      <div>
        <div class="banner-img">
          <img src="//images.pinduoduo.com/mrk/2018-09-22/dafbd27b-88c7-4546-be14-1cfd85d7d68b.jpg" style="width:100%" alt="">
        </div>
        <div class="chat-wrapper">
          <div class="without-msg">
            <div class="msg-icon">
              <van-icon name="pending-evaluate" />
            </div>
            <p class="msg-title">还没有聊天消息哦</p>
            <p class="msg-text">与商家、官方客服的聊天会显示在这里</p>
            <p class="msg-link" @click="chat">联系官方客服</p>

          </div>
        </div>
        <choiceness-goods :hasMore="hasMore" :goodsList="goodsList"></choiceness-goods>
      </div>
    </scroll>
    <go-top @toTop="toTop" :scrollY="scrollY"></go-top>
  </div>
</template>

<script>
import choicenessGoods from "../../components/choicenessGoods/choiceness";
import { recproductList } from "../../api/getDatas";
import scroll from "../../common/scroll";
import goTop from "../../components/goTop/goTop";
export default {
  components: {
    choicenessGoods,
    scroll,
    goTop
  },
  sockets: {
    //不能改
    connect: function() {
      //与socket.io连接后回调
      console.log("socket connected");
    },
    chat: function(value) {
      this.chatText = value; //监听login(后端向前端emit  login的回调)
    }
  },
  data() {
    return {
      goodsList: null,
      hasMore: false,
      count: 20,
      offset: 0,
      scrollY: null,
      chatText: "",
      value: ""
    };
  },
  methods: {
    chat() {
      this.$socket.emit("chat", this.value);
    },
    toTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    scroll(pos) {
      this.scrollY = -pos.y;
    },
    loadMore() {
      let offset = (this.offset += this.count);
      recproductList(this.count, offset).then(res => {
        this.goodsList = this.goodsList.concat(res.data.data);
        this.hasMore = res.data.has_more;
      });
    },
    initData() {
      recproductList(this.count, this.offset).then(res => {
        this.goodsList = res.data.data;
        this.hasMore = res.data.has_more;
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.chat {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  .scroll-wrapper {
    height: 100%;
    overflow: hidden;
  }
}
.without-msg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 3.61rem;
  .msg-icon {
    font-size: 0.7rem;
    color: #ccc;
  }
  .msg-title {
    font-size: 0.16rem;
    line-height: 0.16rem;
    margin-top: 0.3rem;
    color: #58595b;
  }
  .msg-text {
    font-size: 0.14rem;
    line-height: 0.14rem;
    margin-top: 0.12rem;
    color: #9c9c9c;
  }
  .msg-link {
    font-size: 0.14rem;
    line-height: 0.14rem;
    margin-top: 0.2rem;
    color: #3aace9;
  }
}
</style>

